<template>
  <div style="height: 100%">
    <div
      class="q-pa-md row items-center justify-between"
      style="background-color: white; height: 60px"
    >
      <q-breadcrumbs>
        <template v-slot:separator>
          <q-icon size="1.5em" name="chevron_right" color="primary" />
        </template>
        <q-breadcrumbs-el label="应用" icon="fab fa-buffer" to="/app" />
        <q-breadcrumbs-el
          label="器材借用"
          icon="mdi-ballot-outline"
          class="text-blue"
        />
      </q-breadcrumbs>
      <q-btn-dropdown
        class="q-ma-none transparent"
        dense
        flat
        label="选择资产类别"
      >
        <q-list>
          <q-item clickable v-close-popup @click="onItemClick('all')">
            <q-item-section>
              <q-item-label>全部</q-item-label>
            </q-item-section>
          </q-item>
          <div v-for="(item, index) in typelist" :key="index">
            <q-item clickable v-close-popup @click="onItemClick(item.id)">
              <q-item-section>
                <q-item-label>{{ item.typename }}</q-item-label>
              </q-item-section>
            </q-item>
          </div>
        </q-list>
      </q-btn-dropdown>
    </div>
    <div
      class="column justify-center"
      style="background-color: white; height: 50px"
    >
      <q-input
        class="q-px-sm q-py-sm"
        filled
        placeholder="搜索器材……"
        v-model="searchtext"
        dense
      >
        <template v-slot:append>
          <q-icon
            v-show="searchtext"
            name="cancel"
            @click="handlecancel"
            class="cursor-pointer"
          />
          <q-icon name="search" @click="searchassets" />
        </template>
      </q-input>
    </div>
    <div class="column q-pa-sm" style="height: 100%">
      <div
        v-if="isload"
        class="row items-center justify-center"
        style="height: 100%"
      >
        <div class="text-gray column items-center">
          <q-spinner-hourglass color="primary" size="4em" />
          <div>数据加载中 <q-spinner-dots color="grey" size="2.5em" /></div>
        </div>
      </div>
      <div
        v-else
        class="q-mb-md scroll"
        style="width: 100%; height: 100%; padding-bottom: 110px"
      >
        <div v-if="!isload && assetslist.length > 0">
          <q-card
            v-for="(item, index) in assetslist"
            :key="index"
            class="shadow-6 q-pa-none q-mb-sm"
          >
            <q-card-section class="q-pa-none">
              <q-list style="height: 80px" class="q-pa-none">
                <q-item
                  clickable
                  v-ripple
                  style="height: 100%"
                  @click="handleselectassets(item.aid)"
                >
                  <q-item-section avatar>
                    <q-avatar size="60px" text-color="white" rounded>
                      <img :src="serveurl + item.photo" />
                    </q-avatar>
                  </q-item-section>
                  <q-item-section class="text-subtitle1">
                    <q-item-label
                      :style="$q.platform.is.desktop ? '' : 'max-width:200px'"
                      class="ellipsis"
                      lines="1"
                      >{{ item.name }}</q-item-label
                    >
                    <q-item-label
                      class="q-mt-sm"
                      :style="$q.platform.is.desktop ? '' : 'max-width:200px'"
                      caption
                    >
                      <div class="column">
                        <div class="">资产ID：{{ item.aid }}</div>
                        <div
                          class="ellipsis"
                          :style="
                            $q.platform.is.desktop ? '' : 'max-width:200px'
                          "
                        >
                          资产型号：{{ item.model }}
                        </div>
                      </div>
                    </q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-badge
                      v-if="item.status == 1"
                      color="green"
                      outline
                      class="q-ml-sm q-pa-sm q-mr-sm"
                    >
                      在库
                    </q-badge>
                    <q-badge
                      v-if="item.status == 0"
                      color="red"
                      outline
                      class="q-ml-sm q-pa-sm q-mr-sm"
                    >
                      已借出
                    </q-badge>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card-section>
          </q-card>
          <div v-if="ismoreload" class="row text-grey justify-center">
            <q-spinner-gears color="primary" size="2em" />
          </div>
          <div
            v-else
            class="row text-grey justify-center"
            @click="handleloadmore"
          >
            <div v-if="havemore">——&nbsp;&nbsp;点击加载更多&nbsp;&nbsp;——</div>
            <div v-else>——&nbsp;&nbsp;暂无更多&nbsp;&nbsp;——</div>
          </div>
        </div>

        <div
          v-if="!isload && assetslist.length == 0"
          class="row items-center justify-center"
          style="height: 100%"
        >
          <div class="text-gray">
            <img src="icons/empty.png" alt="" srcset="" />
          </div>
        </div>
      </div>
    </div>
    <div class="q-mt-sm" style="background-color: white"></div>
  </div>
</template>
<script>
import { getassets, getassetstype, searchasset } from "assets/api/assets";

export default {
  name: "assets",
  data() {
    return {
      serveurl: "",
      assetslist: [],
      pagenum: 1,
      type: "all",
      typelist: [],
      isload: true,
      searchtext: "",
      ismoreload: false,
      havemore: true,
    };
  },
  created() {
    this.serveurl = this.GLOBAL.serveurl;
    this.loadtype();
    this.loadassetslist();
  },
  methods: {
    handleloadmore() {
      this.pagenum += 1;
      this.loadassetslist();
    },
    handlecancel() {
      this.searchtext = null;
      this.loadassetslist();
    },
    searchassets() {
      if (this.searchtext) {
        this.isload = true;
        let reqdata = {
          search: this.searchtext,
        };
        searchasset(reqdata).then((res) => {
          if (res.data.code == 1) {
            this.isload = false;
            let data = res.data.data;
            this.assetslist = data;
          } else {
            this.isload = false;
          }
        });
      } else {
        this.$q.notify({
          position: "center",
          message: "请输入一些文字！",
          timeout: 500,
        });
      }
    },
    loadtype() {
      getassetstype().then((res) => {
        if (res.data.code == 1) {
          let data = res.data.data;
          this.typelist = data;
        }
      });
    },
    loadassetslist() {
      this.ismoreload = true;
      let reqdata = {
        pagenum: this.pagenum,
        type: this.type,
      };
      getassets(reqdata).then((res) => {
        if (res.data.code == 1) {
          this.isload = false;
          let data = res.data.data;
          if (data.length == 0) {
            this.havemore = false;
          }
          data.forEach((item) => {
            this.assetslist.push(item);
          });

          this.ismoreload = false;
        } else {
          this.isload = false;
          this.ismoreload = false;
        }
      });
    },
    onItemClick(id) {
      console.log(id);
      this.type = id;
      this.loadassetslist();
    },
    handleselectassets(aid) {
      this.$router.push("/app/assets/" + aid);
    },
  },
};
</script>
